<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">

    <!--无数据提示 开始-->
    <section th:if="${#lists.isEmpty(dataMap['list'])}" class="no-data__wrap">
        <span class="no-data-ico"></span>
        <p class="mt20"><span class="c-666">还没有人评论，快来抢头排吧~~~</span></p>
    </section>
    <!--无数据提示 结束-->

    <div th:if="!${#lists.isEmpty(dataMap['list'])}" class="all-comment-q__wrap">
        <br/>
        <section th:each="reply: ${dataMap['list']}" class="c-comment-q-item">
            <div class="media">
                <div class="media-left">
                    <a href="javascript:void(0);">
                        <img class="media-object img-circle lazy" alt="" width="50" height="50" th:attr="data-original=${reply['userMap']['avatar']}"/>
                    </a>
                </div>
                <div class="media-body">
                    <div>
                        <h4 class="media-heading clearfix">
                            <span class="fs14 c-999" th:text="${reply['userMap']['nickname']}"></span>
                        </h4>
                        <p th:text="${reply['replyContext']}"></p>
                        <section class="clearfix">
                            <aside class="pull-right">
                                <a href="javascript:void(0);" th:attr="data-id=${reply['id']}" class="c-999 fs12 huifu"><i class="fa fa-comments-o"></i>  回复</a>
                            </aside>
                            <aside class="pull-left">
                                <span class="fs12 c-ccc" th:text="${#strings.substring(reply['createTime'],0,16)}"></span>
                            </aside>
                        </section>
                        <hr/>
                    </div>
                    <div class="c-reply__wrap">
                        <div th:id="'context-' + ${reply['id']}" class="comment-context" style="display: none;">
                            <section class="c-comment__wrap">
                                <form>
                                    <input type="hidden" name="parentId" th:value="${reply['id']}"/>
                                    <input type="hidden" name="questionId" th:value="${reply['questionId']}"/>
                                    <input type="hidden" name="toUserId" th:value="${reply['userId']}"/>
                                    <textarea name="replyContext" class="form-control" rows="2" th:placeholder="'@' + ${reply['userMap']['nickname']} + ' 回复:'"></textarea>
                                </form>
                            </section>
                            <section class="mt10 clearfix">
                                <aside class="pull-right">
                                    <span class="mr10">
                                        <small class="fs12 c-danger" style="display: none;">
                                            <i class="fa fa-exclamation-circle"></i>
                                        </small>
                                    </span>
                                    <button type="button" class="btn btn-sm btn-outline btn-default">取消</button>
                                    <button type="button" class="btn btn-success btn-sm">回复</button>
                                </aside>
                            </section>
                        </div>

                        <!--子评论区域 开始-->
                        <div class="media" th:if="!${#lists.isEmpty(reply['childList'])}" th:each="childReply: ${reply['childList']}">
                            <div class="media-left">
                                <a href="javascript:;">
                                    <img class="media-object img-circle lazy" alt="" width="50" height="50" th:src="${childReply['userMap']['avatar']}==null or ${childReply['userMap']['avatar']}=='' ? @{{path}/front/web/v3/img/default/default-face.gif(path=${staticPath})} : ${childReply['userMap']['avatar']}"/>
                                </a>
                            </div>
                            <div class="media-body">
                                <div>
                                    <h4 class="media-heading">
                                        <span class="fs14 c-999" th:text="${childReply['userMap']['nickname']} + '&nbsp;&nbsp;&nbsp;&nbsp;回复&nbsp;&nbsp;&nbsp;&nbsp;' + ${childReply['toUserMap']['nickname']}"></span>
                                    </h4>
                                    <p th:text="${childReply['replyContext']}"></p>
                                    <section class="clearfix">
                                        <aside class="pull-right">
                                            <a href="javascript:void(0);" th:attr="data-id=${childReply['id']}" class="c-999 fs12 huifu"><i class="fa fa-commenting-o"></i> 回复</a>
                                        </aside>
                                        <aside class="pull-left">
                                            <span class="fs12 c-ccc" th:text="${#strings.substring(childReply['createTime'],0,16)}"></span>
                                        </aside>
                                    </section>
                                </div>
                                <div class="c-reply__wrap">
                                    <div th:id="'context-' + ${childReply['id']}" class="comment-context" style="display: none;">
                                        <section class="c-comment__wrap">
                                            <form>
                                                <input type="hidden" name="parentId" th:value="${reply['id']}"/>
                                                <input type="hidden" name="questionId" th:value="${reply['questionId']}"/>
                                                <input type="hidden" name="toUserId" th:value="${childReply['userId']}"/>
                                                <textarea name="replyContext" class="form-control" rows="2" th:placeholder="'@'+ ${childReply['userMap']['nickname']} + ' 回复:'"></textarea>
                                            </form>
                                        </section>
                                        <section class="mt10 clearfix">
                                            <aside class="pull-right">
                                                <span class="mr10">
                                                    <small class="fs12 c-danger" style="display: none;">
                                                        <i class="fa fa-exclamation-circle"></i>
                                                    </small>
                                                </span>
                                                <button type="button" data-id="${_reply.id}" class="btn  btn-sm btn-outline btn-default">取消</button>
                                                <button type="button" data-id="${_reply.id}" class="btn btn-success btn-sm">回复</button>
                                            </aside>
                                        </section>
                                    </div>
                                </div>
                            </div>
                            <hr>
                        </div>
                        <!--子评论区域 结束-->
                    </div>
                </div>
            </div>
        </section>
    </div>
    <!--公共分页 开始-->
    <div data-th-replace="layout/webPage"></div>
    <!--公共分页 结束-->
    </section>
</html>